<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
<link rel="stylesheet" href="../common.css" />
<style>
  body {
    background: #343956;
  }

  .container {
    width: 600px;
    height: 400px;
    padding: 40px;
    border-radius: 20px;
    background: linear-gradient(225deg, #2f334d, #383d5c);
    box-shadow: -25px 25px 45px #282c42, 25px -25px 45px #40466a;
  }

  .chart {
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div class="container">
    <div class="chart" id="chart"></div>
  </div>
</body>
<script>
  const dom = document.getElementById("chart");
  const myChart = echarts.init(dom);
  const xData = ["0:00", "2:00", "4:00", "6:00", "8:00", "12:00", "16:00", "20:00", "24:00"];
  const yData = [111, 600, 255, 344, 333, 555, 111, 999, 0];
  let datacoords = [{
    coords: [],
  }];
  for (let i = 0; i < xData.length; i++) {
    datacoords[0].coords.push([xData[i], yData[i]]);
  }
  //渲染图表
  const renderChart = (myChart) => {
    const options = {
      animationDuration: 3000,
      color: ["#ec5d5f", "#f2cb58", "#64a0c8"],
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.5)",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "rgba(0,0,0,.5)",
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      grid: {
        left: "0%", //图表距边框的距离
        right: "3%",
        top: "11%",
        bottom: "2%",
        containLabel: true,
      },
      xAxis: [{
        nameGap: 3, //坐标轴名称与轴线之间的距离。
        nameTextStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 12,
        },
        type: "category",
        data: xData,
        boundaryGap: false, //从0开始
        axisLine: {
          //坐标轴线颜色
          rotate: 30, //坐标轴内容过长旋转
          interval: 0,
          lineStyle: {
            color: "#636E7C",
          },
        },
        axisLabel: {
          showMaxLabel: true,
          fontSize: 12,
          color: "rgba(255,255,255,.8)", //坐标的字体颜色
        },
        axisTick: {
          //是否显示坐标轴刻度  x和y不交叉
          show: false,
        },
      }, ],
      yAxis: [{
          name: "苏苏_icon",
          type: "value",
          nameGap: 20,
          min: 0,
          max: function(value) {
            return Math.ceil(value.max / 5) * 5;
          },
          splitNumber: 5,
          nameTextStyle: {
            //坐标轴字体
            color: "rgba(255,255,255,.89)",
            fontSize: 12,
          },
          splitLine: {
            //网格线颜色
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.25)",
              type: "dashed",
            },
          },
          axisTick: {
            //是否显示坐标轴刻度
            show: false,
          },
          axisLine: {
            //坐标轴线颜色
            show: true,
            lineStyle: {
              color: "#636E7C",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,.8)", //坐标的字体颜色
            fontSize: 12,
          },
        },

      ],
      series: [{
          name: "苏苏的折线图",
          type: "line",
          smooth: 0, //可设置弧度，0-1
          lineStyle: {
            width: 1.5,
            type: "solid",
            shadowOffsetX: 0, // 折线的X偏移
            shadowOffsetY: 3, // 折线的Y偏移
            shadowBlur: 4, // 折线模糊
            shadowColor: "rgba(220,120,40,0.95)", //阴影色
            color: "#DC7828", //折线颜色
          },
          showSymbol: true,
          symbol: "circle",
          symbolSize: 8,
          itemStyle: {
            color: "#2f334d",
            borderWidth: 1,
            borderColor: "#DC7828",
          },
          areaStyle: {
            // 颜色渐变函数 前四个参数分别表示四个位置依次为---右下左上
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 1,
                color: "rgba(220,120,40,0.3)",
              },
              {
                offset: 0.74,
                color: "rgba(220,120,40,0.26)",
              },
              {
                offset: 0,
                color: "rgba(220,120,40,0)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: yData,
        },
        {
          polyline: true,
          showSymbol: false,
          name: '流动光线',
          type: "lines",
          coordinateSystem: "cartesian2d",
          effect: {
            trailLength: 0.3,
            show: true,
            period: 6,
            symbolSize: 4,
            loop: true,
          },
          lineStyle: {
            color: "#fff",
            width: 0,
            opacity: 0,
            curveness: 0,
            type: "dashed",
          },
          data: datacoords,
        }
      ]
    };
    if (options && typeof options === "object") {
      myChart.setOption(options);
    }
  }
  renderChart(myChart);
</script>

</html>